/*Zoom gallery... Base Styles -------------------- */
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
label[for] { cursor: pointer; }
input[type="checkbox"] { display: none; }



body {
	background-color:#F3F3F3;
	font: .87em/150% Arial,Helvetica, Times,  sans-serif;
	color: #646464;
}
a  {
	color: #47506C;
	text-decoration: none;
	outline: none;
}
.labelbox{  padding: 2px;
            float: left;
            display:inline-block;
            width:20%;
            text-align: center;
        }
#pagewrap {
	max-width: 1024px;
        width: 100%;
        margin: auto;
	padding: 2%;}
	* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
img {
    max-width : 100%;
    min-width : 16px;
    height : auto;
}
/*LIGHTBOX --- LIGHTBOX --- LIGHTBOX*/
.lightbox { background-color:rgba(0, 0, 0, 0.65);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  z-index: 1;
  overflow: auto;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 150ms ease-in-out;
  transition: transform 150ms ease-in-out;
}

.lightbox img{
    text-align: center;
    min-width:105px; 
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 85%;
    max-height: 85%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.lightbox  p{ 
    display:block;
    background: rgba(3, 4, 15, 0.65);
    position: fixed;
    top: 95%;
    left: 50%;
    text-align: center;
    min-width:105px;
    font: bold 16px;
    line-height: 18px; 
    color:#CACACA;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    word-wrap: break-word;
    padding: 2px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 96%;
    max-height: 96%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
} 
input[type="checkbox"]:checked + .lightbox {  
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
input[type="checkbox"]:checked ~ .grid { opacity: 0.8; }
/*GRID --- GRID --- GRID*/
.grid {
  max-width: 100%;
  /*position: relative;*/
  margin: 0;
  padding: 0;
  height: 100%;
  background: #4A4A4A;

  padding: 1px;
  overflow: auto;
  text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#D0D0D0;
  -webkit-transition: opacity 150ms;
  transition: opacity 150ms;
}
.grid img{
     /* position: relative;*/
        vertical-align:top;
	margin: auto;
	display:block;
	max-width:100%;
	height:auto;
}
.grid .grid-item  {
  width: 20%;
  display: inline-block;
  padding: 1px;
  /*opacity: .75;*/
  -webkit-transition: opacity 150ms;
  transition: opacity 150ms;
}
/*PORTFOLIO2 --- PORTFOLIO2 --- PORTFOLIO2*/

 #portfolio3{
  display: block;
}
.portfolio3 {display:block;
         width: 100%;
         height: auto;
         background-color:rgba(0, 0, 0, 0.65);
	 margin:0;
	 padding:0;
	 position:relative;
	
	 max-width:100%;
	 height: auto;
	 text-align: center;
}
#portfolio3 ul{
        background: none;
	 list-style-type:none;
	 margin:0;
	 padding:5px;
	 position:relative;
	 max-width:100%;
	 height: auto;
	 text-align: center;
}
#portfolio3 li { background: none;
  display: block;
  float: left;
   width: 30%;
  max-width: 400px;
  padding:5px;
  /*! margin-right: 10px; */
   margin-left:20px; 
  margin-bottom: 0px;
}

#portfolio3 li a {
  display: block;
  padding: 0px;
  background: ;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}
/*PORTFOLIO2 --- PORTFOLIO2 --- PORTFOLIO2*/

 #portfolio2{
  display: block;
}
.portfolio2 {display:block;
         width: 100%;
         height: auto;
         background-color:rgba(0, 0, 0, 0.65);
	 margin:0;
	 padding:0;
	 position:relative;
	
	 max-width:100%;
	 height: auto;
	 text-align: center;
}
#portfolio2 ul{
        background: none;
	 list-style-type:none;
	 margin:0;
	 padding:5px;
	 position:relative;
	 max-width:100%;
	 height: auto;
	 text-align: center;
}
#portfolio2 li { background: none;
  display: block;
  float: left;
   width: 20%;
  max-width: 400px;
  padding:5px;
  /*! margin-right: 10px; */
   /*!margin-left:20px;*/ 
  margin-bottom: 0px;
}

#portfolio2 li a {
  display: block;
  padding: 0px;
  background: ;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
  box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}
/************************************************************************************
picColor
*************************************************************************************/
.picColor{
		width:100%;
		height:auto;
		opacity: 1;
	filter: alpha(opacity=100);
	}
	.picColor:hover
	{opacity: 0.3;
	filter: alpha(opacity=30);
		width:100%;
		height:auto
	}
.mfp-title {
  font-size: 1.2em;
  color: #ddd !important;
  font-weight: 700;
}

.mfp-title {
  font-size: 1.2em;
  color: #ddd !important;
  font-weight: 700;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
/* 
/*--BOX----BOX----BOX--*/
.c3 {
     width:100%;
     wbackground-color:#E9E7D9;
     color:;
     border:0px solid black;
}
 .img-box{
    max-width:22%;
    float:left;
    padding:0px 2% 0% 0%;
    }
/* post image */
.post-image {vertical-align:top;
	margin: auto;
	display:block;
	max-width:100%;
	height:auto;
	padding-bottom:10px;
}
.grid .grid-item:hover { opacity: 1; }
@media screen and (max-width: 1024px) {

.grid .grid-item { width: 50%; }

 }
@media screen and (max-width: 736px) {

.grid .grid-item { width:50%; }


.grid img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
}   
    
    

@media screen and (max-width: 480px) {

.grid .grid-item { width: 100%; }


.grid img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* labelbox */
.labelbox {
    padding: 2px;
    float: left;
    display: inline-block;
    width: 100%;
    text-align: center;
}}